"use client"
import React, { useEffect, useState } from "react";
import {
    Button,
    Checkbox,
    CheckboxChangeEvent,
    Col,
    Form,
    Input,
    InputNumber,
    message,
    Modal,
    Radio,
    Row,
    Select,
    Space,
    Tooltip, Tree,
} from 'antd';
import { QuestionCircleOutlined } from "@ant-design/icons";
import { globalMessage } from "@/utils/message";
import { addJob, getJob, updateJob } from "@/clientApi/monitor/job";

// 定义组件的 props 类型
interface MyComponentProps {
    open: boolean;
    title?: string;
    OnCanCle: () => void;
    record?: Record<string, any> | undefined;

}

const DetailJobLogView: React.FC<MyComponentProps> = (props) => {
    const [form] = Form.useForm();
    const { record } = props
    // 表单的值
    const [formData, setFormData] = useState<any>({})
    const [openCrontab, setOpenCrontab] = useState<boolean>(false)


    function handleCancel() {
        props.OnCanCle()
    }

    useEffect(() => {

        form.setFieldsValue({
            jobName: '',
            jobGroup: '',
            invokeTarget: '',
            cronExpression: '',
            misfirePolicy: '1',
            concurrent: '1',
            status: '0',
        });

    }, [props.record]);









    return (
        <>
            <Modal
                forceRender
                open={props.open}
                title={props.title}
                footer={null}
                onCancel={() => {
                    props.OnCanCle()
                }}
                width={800}
            >

                {record && <Form
                    form={form}
                    name="DetailJobLog"
                    style={{ maxWidth: 800 }}
                >
                    <Row gutter={10}>
                        <Col span={12}>
                            <Form.Item
                                labelCol={{ span: 6, }}
                                label="日志序号"
                                name="jobLogId"
                            >
                                <div>{record.jobLogId}</div>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                labelCol={{ span: 6, }}
                                label={"任务分组"}>
                                <div>{record.jobName}</div>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={10}>
                        <Col span={12}>
                            <Form.Item
                                labelCol={{ span: 6, }}
                                label={"任务分组"}
                            >
                                <div>{record.jobGroup}</div>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                labelCol={{ span: 6, }}
                                label={"执行时间"}>
                                <div>{record.createTime}</div>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={10}>
                        <Col span={24}>
                            <Form.Item
                                labelCol={{ span: 3, }}
                                label="调用方法" >
                                <div>{record.invokeTarget}</div>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={10}>
                        <Col span={24}>
                            <Form.Item
                                labelCol={{ span: 3, }}
                                label="日志信息" >
                                <div>{record.jobMessage}</div>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={10}>
                        <Col span={24}>
                            <Form.Item
                                labelCol={{ span: 3, }}
                                label="执行状态" >
                                <div>{record.status == 0 ? "正常" : '失败'}</div>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={10}>
                        <Col span={24}>
                            <Form.Item
                                labelCol={{ span: 3, }}
                                label="异常信息" >
                                <div style={{
                                    maxHeight: '200px', // 最大高度（超过则滚动，可按需调整，如150px/250px）
                                    overflowY: 'auto',  // 垂直方向：内容溢出时显示滚动条，无溢出时隐藏滚动条
                                    overflowX: 'hidden', // 水平方向：禁止滚动（避免内容换行异常导致横向滚动）
                                    padding: '4px 8px',  // 内边距：优化文字与容器边缘的间距，更美观
                                    border: '1px solid #e8e8e8', // 可选：添加边框，明确内容区域（与AntD表单输入框风格统一）
                                    borderRadius: '4px' // 可选：配合边框添加圆角，优化视觉
                                }}>{record.exceptionInfo}</div>
                            </Form.Item>
                        </Col>
                    </Row>

                </Form>}
            </Modal>
        </>
    )
};
export default DetailJobLogView;
